<template>
    <div class="music-info">
        <div class="title">音乐资讯</div>
        <div class="info" v-for="info in infoList" :key="info.id" @click="toMusicInfoDetail(info.id)">
            <img :src="getUrl(info.imgUrl)" alt="">
            <div>
                <h3>{{ info.title }}</h3>
                <p>{{ info.date }}</p>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="MusicInfo">
import { ref, onMounted } from "vue"
import { useRouter } from 'vue-router';
const router = useRouter();
import { getMusicInfo } from '@/api';
import { getUrl } from '@/utils/format';

let infoList = ref<any>([])
const getData = async () => {
    infoList.value = await getMusicInfo();
    infoList.value.map((item:any) => {
        const now: any = new Date()
        const date: any = new Date(item.createTime);
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hour = String(date.getHours()).padStart(2, '0');
        const minute = String(date.getMinutes()).padStart(2, '0');

        const diffInDays = Math.floor((now - date) / (1000 * 60 * 60 * 24))
        let dayDesc: string;
        switch (diffInDays) {
            case 0:
                dayDesc = "今天";
                break;
            case 1:
                dayDesc = "昨天";
                break;
            case 2:
                dayDesc = "前天";
                break;
            default:
                dayDesc = year == now.getFullYear() ? `${month}-${day}` : `${year}-${month}-${day}`
                break;
        }
        return item['date'] = `${dayDesc} ${hour}:${minute}`;
    })
};
getData();

const toMusicInfoDetail = (id: number) => {
    router.push({ name: '音乐资讯详情', params: { id } });
}
</script>

<style lang="less" scoped>
* {
    margin: 0;
    padding: 0;
}

.title {
    font-size: 24px;
    margin: 0 0 40px 0;
    font-weight: bold;
}

.info {
    display: flex;
    padding: 20px 0;
    border-top: 1px solid #E7E7E7;

    &:last-of-type {
        border-bottom: 1px solid #E7E7E7;
    }

    &:hover {
        background: #F6F6F6;
    }

    img {
        width: 100px;
        height: 100px;
        object-fit: cover;
    }

    div {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 20px;

        p {
            color: #999;
            font-size: 14px;
        }
    }
}
</style>